<template>
  <div class="page">
    <div class="page__bd">
      <div class="weui-tab">
        <div class="weui-navbar">
          <block v-for="(item,index) in tabs"
                 :key="index">
            <div :id="index"
                 :class="{'weui-bar__item_on':activeIndex == index}"
                 class="weui-navbar__item"
                 @click="tabClick">
              <div class="weui-navbar__title">{{item}}</div>
            </div>
          </block>
          <div class="weui-navbar__slider"
               :class="navbarSliderClass"></div>
        </div>
        <div class="weui-tab__panel">
          <div class="weui-tab__content"
               :hidden="activeIndex != 0">
            <div class="tips">
              <!-- 提示：正式考试的重做试卷将作为模拟考试记录！ -->
            </div>
            <div class="noData"
                 v-if="noData1">
              <img :src=noDataPng>
            </div>
            <div v-if="randomRecordArray.length">
              <div class="recordItem "
                   v-for="(item,index) in randomRecordArray"
                   :key="index"
                   :id=item.paper_id>
                <div class="recordName flex">
                  <p class="p1">
                    <span>{{item.paper_name}}</span>
                    <span>{{item.grade}}</span>
                  </p>
                  <p class="p2">
                    <span @click.stop="deleteRecord(index,item.push_type,item.recordingid)">删除</span>
                  </p>
                </div>
                <div class="recordTime flex">
                  <p>用时：
                    <span>{{item.long_time}}s</span>
                  </p>
                </div>
                <div class="recordDate ">
                  {{ item.push_time}}
                </div>
                <div class="recordCheck flex">
                  <p @click.stop="navToCheckWrong(item.type,item.recordingid,userid)">
                    <img :src=CheckWrong
                         alt="">
                    <span>查看错题</span>
                  </p>
                  <p @click.stop="navToAnaliy('random',item.recordingid,userid)">
                    <img :src=ToAnaliy
                         alt="">
                    <span>试题解析</span>
                  </p>
                  <p @click.stop="navToRewrite('random',item.paper_id)"
                     :data-ids="item.paper_id">
                    <img :src=ToRewrite
                         alt="">
                    <span>重新做卷</span>
                  </p>
                </div>
                <div class="recordblank"> </div>
              </div>
            </div>
          </div>
          <div class="weui-tab__content"
               :hidden="activeIndex != 1">
            <!-- 强化考试 -->
            <div class="tips">
              <!-- 提示：正式考试的重做试卷将作为模拟考试记录！ -->
            </div>
            <div class="noData"
                 v-if="noData2">
              <img :src=noDataPng
                   alt="">
            </div>

            <div v-if="tranRecordArray.length">
              <div class="recordItem"
                   v-for="(item,index) in tranRecordArray"
                   :key=index>
                <div class="recordName flex">
                  <p class="p1">
                    <span>{{item.paper_name}}</span>
                    <span>{{item.grade}}</span>
                  </p>
                  <p class="p2">
                    <span @click.stop="deleteRecord(index,item.push_type,item.recordingid)">删除</span>
                  </p>
                </div>
                <div class="recordTime flex">
                  <p>用时：
                    <span>{{item.long_time}}</span>
                  </p>
                </div>
                <div class="recordDate ">
                  {{item.push_time}}
                </div>
                <div class="recordCheck flex">
                  <p @click.stop="navToCheckWrong(item.type,item.recordingid)">
                    <img :src=CheckWrong
                         alt="">
                    <span>查看错题</span>
                  </p>
                  <p @click.stop="navToAnaliy('hardTraning',item.recordingid,userid)">
                    <img :src=ToAnaliy
                         alt="">
                    <span>试题解析</span>
                  </p>
                  <p @click.stop="navToRewrite('hardTraning',item.paper_id)">
                    <img :src=ToRewrite
                         alt="">
                    <span>重新做卷</span>
                  </p>
                </div>
                <div class="recordblank"> </div>
              </div>
            </div>
          </div>
          <div class="weui-tab__content"
               :hidden="activeIndex != 2">
            <div class="tips">
              <!-- 提示：正式考试的重做试卷将作为模拟考试记录！ -->
            </div>
            <div class="noData"
                 v-if="noData3">
              <img :src=noDataPng
                   alt="">
            </div>
            <div v-if="formalRecordArray.length">
              <div class="recordItem "
                   v-for="(item,index) in formalRecordArray"
                   :key="index"
                   :id=item.paperId>
                <div class="recordName flex">
                  <p class="p1">
                    <span>{{item.paper_name}}</span>
                    <span>{{item.grade}}</span>
                  </p>
                  <p class="p2">
                    <span @click.stop="deleteRecord(index,item.push_type,item.recordingid)">删除</span>
                  </p>
                </div>
                <div class="recordTime flex">
                  <p>用时：
                    <span>{{item.long_time}}</span>
                  </p>
                </div>
                <div class="recordDate ">
                  {{ item.push_time}}
                </div>
                <div class="recordCheck flex">
                  <p @click.stop="navToCheckWrong('formal',item.recordingid)">
                    <img :src=CheckWrong
                         alt="">
                    <span>查看错题</span>
                  </p>
                  <p @click.stop="navToAnaliy('formal',item.recordingid,userid)">
                    <img :src=ToAnaliy
                         alt="">
                    <span>试题解析</span>
                  </p>
                  <p @click.stop="navToRewrite('formal',item.paper_id)">
                    <img :src=ToRewrite
                         alt="">
                    <span>重新做卷</span>
                  </p>
                </div>
                <div class="recordblank"> </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { formatTime } from '@/utils'
export default {
  data () {
    return {
      tabs: ['模拟考试', '强化训练', '正式考试'],
      activeIndex: 0,
      randomRecordArray: [],
      formalRecord: {},
      strongRecord: {},
      timer: null,
      currentrandomArray: [],
      formalRecordArray: [],
      tranRecordArray: [],
      noDataPng: 'https://dati.co-links.com/static/xadmin/images/noData.png',
      noformalData: false,
      norandomData: false,
      noTranData: false,
      CheckWrong: 'https://dati.co-links.com/static/xadmin/images/checkReason.png',
      ToAnaliy: 'https://dati.co-links.com/static/xadmin/images/analysisReason.png',
      ToRewrite: 'https://dati.co-links.com/static/xadmin/images/rewriteTest.png',
      noData1: false,
      noData2: false,
      noData3: false
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo,
      randomRecord: state => state.randomRecord,
      formalRecord: state => state.formalRecord,
      traning: state => state.traning
    }),
    navbarSliderClass () {
      if (Number(this.activeIndex) === 0) {
        return 'weui-navbar__slider_0'
      }
      if (Number(this.activeIndex) === 1) {
        return 'weui-navbar__slider_1'
      }
      if (Number(this.activeIndex) === 2) {
        return 'weui-navbar__slider_2'
      }
    }
  },
  methods: {
    deleteRecord (index, type, recordId) {
      console.log(index, type, recordId)
      var that = this
      wx.showLoading({
        icon: 'loading',
        success () {
          that.timer = setTimeout(() => {
            if (type === 1) {
              that.formalRecordArray.splice(index, 1)

              wx.hideLoading()
              that.delete(recordId)
            } else if (type === 3) {
              console.log(that.randomRecordArray[index])
              that.randomRecordArray.splice(index, 1)

              wx.hideLoading()
              that.delete(recordId)
            } else if (type === 2) {
              that.traning.splice(index, 1)
              wx.hideLoading()
              that.delete(recordId)
            }
          }, 1500)
          //
        }
      })
    },
    delete (recordId) {
      let that = this
      that.$http.post('https://dati.co-links.com/operat/del_recording/', {
        recordingid: recordId
      }).then((res) => {
        console.log(res)
      })
    },
    tabClick (e) {
      if (Number(e)) {
        this.activeIndex = 0
      } else {
        this.activeIndex = e.currentTarget.id
      }
      wx.showLoading({
        title: '加载中',
        success () {
          wx.hideLoading()
        }
      })
    },
    navToCheckWrong (type, id) {
      wx.navigateTo({
        url: '../checkWrong/main?recordingid=' + id + '&userid=' + this.userid
      })
    },
    // 重新做试卷
    navToRewrite (type, id) {
      console.log(type, id)
      if (type === 'formal') {
        console.log(id)
        console.log(this.formalRecord)
        wx.navigateTo({
          url: '../exam/main?type=' + 'formal' + '&id=' + id + '&defaultItem=' + 0
        })
      } else if (type === 'random') {
        wx.navigateTo({
          url: '../simulationTest/main?type=' + 'random' + '&id=' + id + '&defaultItem=' + 0
        })
      } else if (type === 'hardTraning') {
        wx.showModal({
          title: '强化训练试题不支持重做',
          showCancel: false
        })
      }
    },
    // 试题分析
    navToAnaliy (type, paperid) {
      wx.navigateTo({
        url: '../examAnalyse/main?userid=' + this.userid + '&paperid=' + paperid + '&type=' + type
      })
    },
    init () {
      let that = this
      this.userid = this.userInfo.user_id || wx.getStorageSync('user_id')
      wx.showLoading({
        title: 'loading'
      })
      this.$http.get('https://dati.co-links.com/operat/history/', {
        userid: that.userid
      }).then((res) => {
        let result = res.data.data
        wx.hideLoading()
        for (var i in result) {
          result[i].push_time = formatTime(result[i].push_time)
          if (res.data.data[i].push_type === 1) {
            // 正式、
            that.formalRecordArray.push(res.data.data[i])
          } else if (res.data.data[i].push_type === 2) {
            // 强化
            console.log(res.data.data[i])
            that.tranRecordArray.push(res.data.data[i])
            console.log(that.traning)
            console.log(that.tranRecordArray)
          } else if (res.data.data[i].push_type === 3) {
            // 模拟
            console.log(that.randomRecordArray)
            that.randomRecordArray.push(res.data.data[i])
          }
        }
        console.log(that.formalRecordArray)
        console.log(that.tranRecordArray)
        console.log(that.randomRecordArray)
        if (!that.formalRecordArray.length) {
          console.log(123)
          that.noformalData = true
        }
        if (!that.tranRecordArray.length) {
          console.log('tranRecordArray')
          that.noTranData = true
        }
        if (!that.randomRecordArray.length) {
          that.norandomData = true
          console.log('that.norandomData')
        }
        console.log(this.noformalData, 'noformalData')
      })
    }
  },
  mounted () {
    if (this.$mp.query.type === 'formal') {
      this.activeIndex = 2
    } else if (this.$mp.query.type === 'random') {
      this.activeIndex = 0
    } else if (this.$mp.query.type === 'strongTraning') {
      this.activeIndex = 1
    } else {
      this.activeIndex = 0
    }
    // console.log(this.$mp.query.random)
    let $this = this
    this.randomRecordArray = []
    this.tranRecordArray = []
    this.formalRecordArray = []
    $this.init()
    // wx.getStorageInfo({
    //   success: function (res) {
    //     console.log(res.length)
    //     for (let i = 0; i < res.keys.length; i++) {
    //       console.log(wx.getStorageSync(res.keys[i]))
    //       if (wx.getStorageSync(res.keys[i]).type === 'randomTest') {
    //         console.log('randomTest')
    //         console.log(wx.getStorageSync(res.keys[i]))
    //         let currentrandomArray = wx.getStorageSync(res.keys[i])
    //         $this.randomRecordArray.push(currentrandomArray)
    //         console.log($this.randomRecordArray)
    //       } else if (wx.getStorageSync(res.keys[i]).type === 'formalTest') {
    //         let currentFormalArray = wx.getStorageSync(res.keys[i])
    //         $this.formalRecordArray.push(currentFormalArray)
    //         console.log($this.formalRecordArray)
    //       } else if (wx.getStorageSync(res.keys[i]).type === 'strongTest') {
    //         console.log('strongTest')
    //         let currentTranArray = wx.getStorageSync(res.keys[i])
    //         $this.tranRecordArray.push(currentTranArray)
    //       }
    //     }
    //   }
    // })
  }
}
</script>
<style lang="stylus" scoped>
page {
  height: 100%;
}

.page {
  height: 100%;
  background: #fff !important;
}

.page__bd {
  height: 100%;
}

.weui-tab__content {
  height: 100%;
}

.weui-navbar__slider_0 {
  left: 0rpx;
  transform: translateX(50%);
}

.weui-navbar__slider_1 {
  left: 33%;
  transform: translateX(50%);
}

.weui-navbar__slider_2 {
  left: 66%;
  transform: translateX(50%);
}

.weui-navbar__slider {
  width: 126rpx;
}

.weui-navbar {
  border-bottom: 0;
  background: white;
}

.tips {
  // height 60rpx
  height: 2px;
  line-height: 60rpx;
  background: #f7f7f7;
  color: #666666;
  font-size: 28rpx;
  padding: 0 32rpx;
}

.recordItem {
  padding: 0 32rpx;
  margin-bottom: 20rpx;
  background: white;
  font-size: 28rpx;
  color: #666666;
}

.recordblank {
  height: 8rpx;
  background: #f7f7f7;
  margin-left: -32rpx;
  margin-right: -32rpx;
}

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.recordName {
  padding-top: 20rpx;
}

.recordName .p1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;

  span:nth-child(1) {
    color: #000;
    font-size: 32rpx;
    font-weight: bold;
  }

  span:nth-child(2) {
    color: #00cc76;
    font-size: 32rpx;
    font-weight: bold;
    margin-left: 25rpx;
  }
}

.recordName .p2 {
  width: 112rpx;

  span {
    display: inline-block;
    width: 112rpx;
    height: 46rpx;
    background: #febd32;
    color: white;
    font-size: 26rpx;
    text-align: center;
    line-height: 46rpx;
    border-radius: 6rpx;
    -webkit-border-radius: 6rpx;
  }
}

.recordDate {
  border-bottom: 2px solid #e6e6e6;
  padding-bottom: 26rpx;
}

.recordCheck {
  justify-content: space-between;
  line-height: 80rpx;
  height: 80rpx;

  p {
    font-size: 28rpx;
    color: #333333;

    img {
      width: 40rpx;
      height: 35rpx;
      margin-right: 15rpx;
      vertical-align: middle;
    }
  }
}

.noData {
  height: calc(100% - 88rpx);

  img {
    position: absolute;
    display: block;
    width: 300rpx;
    height: 300rpx;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}
</style>
